<template>
    <PageLayout type="detail">
        <FieldList label-position="top" label-width="80" :colon="true"
            title="基本信息"
            :model="info"
        >
            <FieldItem label="姓名">
                {{ info.userName }}
            </FieldItem>
            <FieldItem label="年龄">
                {{ info.age }}
            </FieldItem>
            <FieldItem label="性别" isMap :mapObj="{'1':'男','2':'女'}">
                {{ info.gender }}
            </FieldItem>
            <FieldItem label="出生日期">
                {{ info.birthday }}
            </FieldItem>
            <FieldItem label="出生日期">
                {{ info.birthday }}
            </FieldItem>
            <FieldItem label="是否毕业" isBoolean>
                {{ info.graduate }}
            </FieldItem>
            <FieldItem label="毕业院校">
                {{ info.school }}
            </FieldItem>
            <FieldItem label="最高学位" isFilter :filterList="degreeList">
                {{ info.degree }}
            </FieldItem>
            <FieldItem label="家庭住址">
                {{ info.address }}
            </FieldItem>
            <FieldItem label="民族">
                {{ info.nation }}
            </FieldItem>
            <FieldItem label="工作单位" col="2">
                {{ info.unit }}
            </FieldItem>
            <FieldItem label="文件展示" col="4" blankBackground>
                <FileList  :uploadPath="FileUploadPath" v-model:list="fileList" :opt="false"
                    :preview-path="PreviewFilePath" :download-path="DownloadFilePath" />

            </FieldItem>
            <FieldItem label="图片展示" col="4" blankBackground>
                <ImageList :limit="8" :opt="false" v-model:list="imageList" />
            </FieldItem>
            <FieldItem col="4" label="个人简介">
                <div class="zy-editor" v-html="info.memo"></div>
            </FieldItem>
        </FieldList>
    </PageLayout>
</template>

<script setup name="DetailDemo">
import { reactive,ref } from "vue";
import {SuccessAjax,CopyProperty} from "hongshu-view";
import api from "~api";
import {useRoute} from "vue-router";
import {degreeList} from "./../opt_demo/conf";
import { FileUploadPath, PreviewFilePath, DownloadFilePath } from "~public/tools/FileTool";

let {query} = useRoute();
const fileList = ref([]);
const imageList = ref([]);

const info = reactive({
    id: "",
    userName: "",
    age: "",
    gender: "",
    birthday: "",
    school: "",
    address: "",
    nation: "",
    unit: "",
    memo: "",

    graduate: "",
    imageList: "",//
    fileList: "",
    degree: "",
});

const loadInfo = ()=>{
    let mainId = query.id;
    if(!mainId) return;
    SuccessAjax(api.getById+"/"+mainId,{},{
        method:"get"
    }).then(({data})=>{
        // console.log(data);
        CopyProperty(info,data);
        data.imageList &&(imageList.value = JSON.parse(data.imageList));
        data.fileList  && (fileList.value = JSON.parse(data.fileList))
    });
}

loadInfo();

</script>

<style lang="less" scoped>

</style>